<template>
  <div :style="{ height: '100px' }" :key="renderKey">
    <Bubble
      typing
      :content="text"
      :message-render="renderMarkdown"
      :avatar="{ icon: userOutlinedIcon }"
    />
  </div>
</template>

<script setup name="BubbleMarkdown">
import { ref, h, watchEffect } from 'vue'
import { UserOutlined } from '@ant-design/icons-vue'
import { Bubble } from 'ant-design-x-vue'
import { Typography } from 'ant-design-vue'
import markdownit from 'markdown-it'

const md = markdownit({ html: true, breaks: true })

const text = `
> Render as markdown content to show rich text!

Link: [Ant Design X](https://x.ant.design)
`.trim()

const renderMarkdown = (content) => h(Typography, null, {
  default: () => h('div', { innerHTML: md.render(content) })
})

const renderKey = ref(0)
const userOutlinedIcon = h(UserOutlined)

watchEffect((onCleanup) => {
  const id = setTimeout(
    () => {
      renderKey.value = renderKey.value + 1
    },
    text.length * 100 + 2000
  )
  onCleanup(() => {
    clearTimeout(id)
  })
})
</script>